<template>
    <div style="background-color: #F2F2F2">

      <div>
        <div style="border: 1px;">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

            <el-menu-item index="1" ><img style="margin-left: 20px ;width: 150px;height: 50px" src="http://qpt0e0e6g.hb-bkt.clouddn.com/login.png"></el-menu-item>
            <el-menu-item index="2" style="margin-left: 10px;font-size: 18px"><router-link to="/">首页</router-link></el-menu-item>
            <el-menu-item index="3" style="margin-left: 10px;font-size: 18px">榜单</el-menu-item>
            <el-menu-item index="4"  style="margin-left: 10px;font-size: 18px">COS</el-menu-item>
            <el-menu-item index="5"  style="margin-left: 10px;font-size: 18px"><router-link to="/mvshare">视频</router-link></el-menu-item>
            <el-menu-item index="6"  style="margin-left: 10px;font-size: 18px">问答</el-menu-item>
            <el-menu-item index="7">
              <el-input  style="width: 200px ;"
                         placeholder="搜索COS、视频、用户..."
                         v-model="input"
                         clearable >
              </el-input>  <el-button type="primary" @click="findEs()" style="height: 39px;" con="el-icon-search">搜索</el-button>
            </el-menu-item>
            <el-menu-item index="8"  style="margin-left: 65px;font-size: 18px"><router-link to="/login">登录</router-link></el-menu-item>
            <el-menu-item index="9"  style="margin-left: 5px;font-size: 18px"><router-link to="/regist">注册</router-link></el-menu-item>
            <el-dropdown index="10" style="margin-left: 10px ;" >
              <el-button style="background-color: #ff6fa2;width: 100px;height: 50px;">
                <i class="el-icon-finished el-icon--right"style="font-size: 20px;align-content: center;color: aliceblue">发布</i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-circle-plus" ><router-link to="/upload">图片</router-link></el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" >视频</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </el-menu>
        </div>
      </div>


      <div  style="margin-top: 30px">
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark">
          <el-carousel :interval="4000" type="card" height="350px">
            <el-carousel-item v-for="pic in item" :key="pic">
              <h3 class="medium"><img style="height: 350px" :src="pic" class="image" ></h3>
            </el-carousel-item>
          </el-carousel>
        </div></el-col>
      </el-row>
      </div>


      <el-divider style="width: 1300px;margin-top: 20px"></el-divider>
      <el-row>
        <el-col :span="18"><div class="grid-content bg-purple" >

          <div style="margin-top: 40px" >
            <!--边框：border: 5px yellowgreen solid ; border: 1px red solid;-->
            <div style="width: 1100px">
              <el-row>

                <!--<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
              </ul>-->
                <el-col :span="24">

                  <div class="grid-content bg-purple-dark" style="width: 1100px;margin-left: 0px">
                    <el-row style="margin-left: 50px">

                      <el-col :span="7" v-for="(o, index) in shareList" :key="o.id" :offset="index > 0 ? 1 : 1">
                        <el-card :body-style="{ padding: '0px' }" style="margin-top: 10px;height: 469px">  <!--background-color: #ffffe5-->
                          <div style="  float: left;width: 30px;height: 30px;margin-left: 20px;margin-right: 10px;margin-bottom:10px; ">
                            <a href=""> <el-image style="border-radius: 10px" :src="o.userpic" class="image"></el-image></a>
                          </div>
                            <div style="  font-size: 18px;  color:  #000000;font-style: italic;text-align: left;margin-left: 20px;margin-top:10px;margin-bottom:10px;">
                             <!-- <span >{{o.share_name}}</span>-->
                              <span v-html="o.share_name"></span>
                            </div>
                            <div style="text-align: left;margin-left: 20px;" v-if="o.share_desc!=null">
                              <!--<span>{{o.share_desc}}</span>-->
                              <span v-html="o.share_desc"></span>
                              <el-button class="button" @click="goshare(o.id)">
                                <span style="font-size: 18px;color: #3385ff; ">查看</span>
                              </el-button>
                            </div>
                            <div style="margin-left: 10px;margin-right: 10px;margin-top: 10px" v-if="o.pic1!=null">
                              <el-button class="button" @click="goshare(o.id)"><el-image style="height: 300px" :src="o.pic1" class="image"></el-image></el-button>
                            </div>

                            <div style="margin-top: 50px">

                            </div>
                            <div style="margin-top: 10px">
                              <div style="height: 40px">
                                <el-button type="text" style="font-size: 14px; " class="button" @click="good(o.id)"><i class="el-icon-lollipop" ></i>{{ o.good }}点赞</el-button>
                                <el-button type="text" style="font-size: 14px; " class="button" @click="comments(o.id)"><i class="el-icon-chat-line-round" ></i>评论</el-button>
                                <el-button type="text" style="font-size: 14px; " class="button" @click="forwarding(o.id)"><i class="el-icon-position" ></i>转发</el-button>
                                <el-button type="text" style="font-size: 14px; " class="button" @click="collection(o.id)"><i class="el-icon-star-off" ></i>收藏</el-button>
                              </div>
                            </div>
                        </el-card>
                      </el-col>

                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>


        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">
          <div style="margin-top: 40px" >

          <div >
            <el-row >
              <el-col :span="6"><div class="grid-content bg-purple-dark" >

                <img  style="height: 170px;width: 300px" src="https://sf1-scmcdn-tos.pstatp.com/goofy/bcy/image/banner.448c53.png" class="image">
                <img style="height: 170px;margin-top: 20px;width: 300px" src="https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/17bkz/7fe5a010729911ebb238c984f2d05777.jpg~tplv-banciyuan-sq90.image" class="image">
                <img style="height: 170px;margin-top: 20px;width: 300px" src="https://p9-bcy.byteimg.com/img/banciyuan/editor/flag/17bl6/66b0811077ed11eba2ef3b2ab83fea1d.jpg~tplv-banciyuan-sq90.image" class="image">
                <img style="height: 170px;margin-top: 20px;width: 300px" src="https://p9-bcy.byteimg.com/img/banciyuan/editor/flag/4byj/4f2c7de0661e11ebbb34f34d79189fd0.png~tplv-banciyuan-sq90.image" class="image">
                <img style="height: 170px;margin-top: 20px;width: 300px" src="https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/4byj/50fc552065cc11eb8988e56db74e2ac7.jpg~tplv-banciyuan-sq90.image" class="image">
                <img style="height: 170px;margin-top: 20px;width: 300px" src="https://p9-bcy.byteimg.com/img/banciyuan/81f2bdbcc6704ebeb9bcce7f55472416~tplv-banciyuan-sq90.image" class="image">
                <img style="height: 170px;margin-top: 20px;width: 300px" src="https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/17bif/872b9350606711eb963e4f72473aba51.jpg~tplv-banciyuan-sq90.image" class="image">
              </div></el-col>
            </el-row>
          </div>
        </div>

        </div></el-col>
      </el-row>
      <el-divider style="width: 1300px;margin-top: 20px"></el-divider>

        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[9, 12, 15, 18]"
      :page-size="params.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

      <el-divider style="width: 1300px;margin-top: 20px"></el-divider>
    </div>

</template>


<script>
  import axios from 'axios'
  axios.defaults.withCredentials=true
    export default {
        name: "index",
      data(){
        return{
          item:[],
          currentDate: new Date(),
          count: 0,
          activeIndex: '1',
          input: '',
          shareList:[],
          visible: false,
          total:10,
          params:{
            size:9,
            page:1
          },
        }
      },
      methods:{
        handleSizeChange(val) {

          this.params.size=val;
          this.findAll();
        },
        handleCurrentChange(val) {
          this.params.page =val;
          this.findAll();
        },
         handleClicks() {
          this.upload=true;
        },
        findEs:function(){
          var uri="http://localhost/bcy-search/search/seachKey";
          if (this.input!=''){
            uri="http://localhost/bcy-search/search/seachKey/"+this.input
          }
          axios.get(uri).then(res=>{
            this.shareList=res.data.data;
          })
        },

        load () {
          this.count += 2

          axios.get("http://localhost/bcy-picshare/picShare/findShare").then(res=>{
            if (res.data.code==200){
              this.shareList+=res.data.data;
            }
          })


        },
        sousuo:function(){
          alert(this.input)
        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        findAll:function(){
          axios.get("http://localhost/bcy-picshare/picShare/findShare/"+this.params.page+"/"+this.params.size).then(res=>{
            if (res.data.code==200){
              this.shareList=res.data.data;
              this.total=res.data.total;
            }
          })
        },
        findPic:function () {
            axios.get("http://localhost/bcy-picshare/picShare/findPic").then(res=>{
              if (res.data.code==200){
                this.item=res.data.data;
              }
            })
          },
        goshare:function(id){
          this.$router.push({name:'share',params:{id:id}});
        },
        good:function (id) {
          axios.post("http://localhost/bcy-picshare/picShare/addgood",{id:id}).then(res=>{
            if (res.data.code==200){
              this.$message(res.data.message);
              this.findAll();
            }if (res.data.code==206) {
              this.$message("未登录");
            }
          })
        },
        comments:function (id) {
          this.$router.push({name:'share',params:{id:id}});
        },
        forwarding:function (id) {
          axios.post("http://localhost/bcy-picshare/picShare/forwarding",{id:id}).then(res=> {
            if (res.data.code==200) {
              this.$message(res.data.message);
              this.findAll();
            }
            this.$message(res.data.message);
          })
        },
        collection:function (id) {
          alert("谢谢收藏")
        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
      },
      mounted() {
          this.findPic();
          this.findAll();
      }
    }
</script>

<style>


  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .button {
    padding: 0;
  }

  .image {
    width: 100%;
    display: block;
  }






  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }


</style>
